theme: Simplify .overview-icon styling

This reduces duplicate code by using overview-icon() and %app-well-app
to improve maintainability.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/957

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index d218557871513e9ade53701ebdca1921b03e30eb..197b4fcb9580d7f5d92f6ec171a856721e4a9808 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -91,13 +91,9 @@ stage {
 
 // icon tiles
 %icon_tile {
-  background-color: transparent; // no background
-  color: $osd_fg_color;
   border-radius: $base_border_radius + 4px;
   padding: $base_padding;
-  border-width: 2px;
-  border-style: solid;
-  border-color: transparent;
+  border: 2px solid transparent;
   transition-duration: 100ms;
   text-align: center;
 }

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 44323b3ce94fdeca37a11fdfce36e569b85a39f7..4c0383e363f8ddbc82679cb99f8ca14c38cda750 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -194,3 +194,38 @@
     icon-shadow: none;
   }
 }
+
+// overview icons
+@mixin overview-icon($color) {
+  .overview-icon {
+    @extend %icon_tile;
+    color: $color;
+  }
+
+  &:hover,
+  &:selected {
+    .overview-icon {
+      background-color: transparentize($color, .9);
+    }
+  }
+
+  &:focus {
+    .overview-icon {
+      background-color: transparentize($color, .7);
+      // border-color: $selected_bg_color;
+    }
+  }
+
+  &:drop {
+    .overview-icon {
+      background-color: transparentize($selected_bg_color, .15);
+    }
+  }
+
+  &:active,
+  &:checked {
+    .overview-icon {
+      background-color: transparentize(darken($osd_bg_color, 10%), .5);
+    }
+  }
+}

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index e3e289d8a412b57ca5d752869870c8a86bde7e83..cc2b7a7e72645dc5be9aedddd7152d89612f1d23 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -33,55 +33,18 @@ $app_grid_fg_color: #fff;
 
 // Icon tiles in the app grid
 .app-well-app,
-.app-folder {
-
-  .overview-icon {
-    @extend %icon_tile;
-    color: $app_grid_fg_color;
-  }
+%app-well-app {
+  @include overview-icon($app_grid_fg_color);
 
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.7);
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:focus {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.7);
-      // border-color: $selected_bg_color;
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:drop {
-    .overview-icon {
-      background-color: transparentize($selected_bg_color,.15);
-    }
-  }
-
-  &:active,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-    }
+  > .overview-icon.overview-icon-with-label {
+    padding: 10px 8px 5px 8px;
+    spacing: $base_spacing;
   }
 }
 
 /* App Folders */
 .app-folder {
   .overview-icon {
-    @extend %icon_tile;
   }
 }
 
@@ -178,11 +141,6 @@ $app_grid_fg_color: #fff;
   padding: 0px 88px 10px 88px;
 }
 
-.app-well-app > .overview-icon.overview-icon-with-label {
-  padding: 10px 8px 5px 8px;
-  spacing: $base_spacing;
-}
-
 // Label when no frequent apps
 .no-frequent-applications-label { @extend %status_text; }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 8de114b594fc281814dcd8017cdcd04b3a843ea4..c639fad6a249b780d3238c9361659919439156e9 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -48,36 +48,13 @@ $dash_border_radius: $modal_radius * 1.5;
 
 // Show apps button
 .show-apps {
-  color: $osd_fg_color;
-
-  & .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
+  @include overview-icon($osd_fg_color);
 
-  &:hover,
   &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:drop .overview-icon {
-    background-color: transparentize($selected_bg_color,.15);
-  }
-
-  &:active, &:checked {
+  &:checked {
     .overview-icon {
       background-color: darken($osd_bg_color,10%);
-    }
-  }
-
-  &:checked, &:focus {
-     .show-apps-icon {
       color: $fg_color;
-      transition-duration: 100ms;
     }
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 600aa83bc9500f3fbc8114f599e5c164cf23b90b..1c53abfc2d0baac7a3f27ddfbea243a8db7725e1 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -41,33 +41,7 @@
 
 // Search results with icons
 .grid-search-result {
-  > .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
-
-  > .overview-icon.overview-icon-with-label {
-    padding: 10px 8px 5px 8px;
-    spacing: $base_spacing;
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.8);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:drop .overview-icon {
-    background-color: transparentize($selected_bg_color,.15);
-  }
-
-  &:active .overview-icon,
-  &:checked .overview-icon {
-    background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-  }
+  @extend %app-well-app;
 }
 
 // search result provider